<template>
  <div>
    <div class="d-flex justify-center pa-3 text-h3 font-weight-bold">
      {{ articleInfo.title }}
    </div>
    <div class="d-flex justify-center  align-center">
      <v-icon class="mr-1">mdi-calendar</v-icon>
      <span>{{
        articleInfo.CreatedAt | dateformat("YYYY-MM-DD HH:mm:SS")
      }}</span>
    </div>
    <v-divider class="pa-3 ma-3"></v-divider>
    <v-alert
      class="ma-2"
      elevation="1"
      color="indigo"
      dark
      outlined
      border="left"
      >{{ articleInfo.desc }}</v-alert
    >
    <div
      class="content ma-5 pa-3 text-justify"
      v-html="articleInfo.content"
    ></div>
  </div>
</template>

<script>
export default {
  props: ["id"],
  data() {
    return {
      articleInfo: {},
    };
  },
  created() {
    this.getArticle();
  },
  methods: {
    // 获取文章详情信息
    async getArticle() {
      const { data: res } = await this.$http.get(`/article/${this.id}`);
      if (res.status != 200) return this.$message.error("文章详情获取失败");
      this.articleInfo = res.data;
      console.log(this.articleInfo);
    },
  },
};
</script>

<style lang="scss" scoped>
.content >>> img,
span,
p {
  width: 100%;
}
</style>